<template>
    <div class="icons">
      <swiper :options="swiperOption" class="swiper-container">
        <swiper-slide v-for="(items ,index) in page" :key="index">
          <div class="icon" v-for="(item,index) in items" :key="item.id">
            <img :src="item.url" alt="">
            <p>{{item.text}}</p>
          </div>

        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>

      </swiper>

    </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'//引入样式
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: "Icons",
        props:{
          iconsUrl:Array
        },
        components:{//注册组件
          swiper,
          swiperSlide
        },
        data(){
          return{
            swiperOption: {
              pagination: ".swiper-pagination",
            }

          }
        },
        computed:{
            page(){
              const pages=[];
              this.iconsUrl.forEach((item,index) =>{
                const page=Math.floor(index/8);
                if(!pages[page]){
                  pages[page]=[];
                }
                pages[page].push(item);
              });

              return pages;
            }
        }
    }
</script>

<style lang="stylus" scoped>
  .icons >>> .swiper-container{
    overflow:hidden;
    width:100%;
    height:0;
    padding-bottom:50%;
    touch-action:none;

  }
  .icons >>> .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom:-2px;
  }
  .icons >>> .swiper-pagination-bullet-active{
    background:#00bcd4;
  }

  .icons{
    border-bottom:1px solid #ccc;
    padding-bottom:5px;
    .icon{
      width:25%;
      height:0;
      padding-bottom:25%;
      text-align:center;
      float:left;

      img{
        width:60%;
        margin-top:.04rem;
      }
      p{
        font-size:.14rem;
        color:#6f6f6f;
        margin-top:.03rem;
      }
    }
  }

</style>
